<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子模型</title>
    <style>
      .aq {
        /* 内边距 */
        /* width: 200px;
        height: 200px;
        background-color: brown; */
        /* 四周 */
        /* padding: 20px; */
        /* 两个参数 上下+左右 */
        /* padding: 20px 30; */
        /* 三个参数 上+左右+下 */
        /* padding: 20px 30px 40px; */
        /* 四个参数 上+右+下+左 */
        /* padding: 20px 30px 40px 50px; */


        /* width: 200px;
        height: 200px;

        border-top: 50px solid red;
        border-bottom: 50px solid blue;
        border-left: 50px solid blueviolet;
        border-right: 50px solid peru; */
        /* 三角 */
        /* width: 0px;
        border-top: 100px solid transparent;
        border-bottom: 100px solid blue;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent; */
        /* 圆 */

        /* width: 300px;
        height: 300px;
        background-color: brown;
        border-radius: 150px; */
      }
    </style>
  </head>
  <body>
    
    <div class="aq"></div>
  </body>
</html>
